<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta property="wb:webmaster" content="125d4c886033b1d0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery万能特效,jQuery幻灯片,jQuery焦点图,jQuery Tab切换,jQuery图片滚动,jQuery无缝滚动">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 如何使用</title>
<script type="text/javascript" src="jquery1.42.min.js"></script>
<link href="default.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreRDark.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body>

<!-- header S -->
<div id="header">
	<div class="headerBg"></div>
	<span class="nav">
		<a href="index.html">首页</a>|<a href="howToUse.html">如何使用</a>|<a href="param.html">查看参数</a>|<a href="demo.html">基础效果</a>|<a href="otherDemo.html">扩展效果</a>|<a href="downLoad.html">下载页面</a>|<a target="_blank" href="http://www.superslide2.com/blog/?cat=1">常见问题</a>|<a target="_blank" href="http://www.superslide2.com/blog/?cat=4">其它发明</a>|<a target="_blank" href="http://www.superslide2.com/blog/?page_id=12">交流反馈</a>
	</span>
	<div class="title">
			<h1 tite="SuperSlide" id="logo">SuperSlide</h1><em>v2.1</em><span class="author"> -- 大话主席</span>
	</div>
</div>
<!-- header E -->

<!-- content S -->
<div id="content" class="usePage">

<style type="text/css">
.syntaxhighlighter table td.code{ padding:10px 0 !important;  }
.syntaxhighlighter{ margin:0 !important;  }
</style>

<dl class="usePageDl">
	 <dt>
		<h2>1、引用jQuery.js 和 jquery.SuperSlide.js</h2>
		<p>因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide</p>
	 </dt>
	 <dd>
		<pre class="brush: html;">
			&lt;head&gt;
				&lt;script type="text/javascript" src="../jquery1.42.min.js"&gt;&lt;/script&gt;
				&lt;script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"&gt;&lt;/script&gt;
			&lt;/head&gt;
		</pre>
	 </dd>

	 <dt>
		<h2>2、编写HTML</h2>
		<p>以下是默认的HTMl结构，分别是 ".hd" 里面包含ul， ".bd" 里面包含ul</p>
	 </dt>
	 <dd>
			<pre class="brush: html;">
				<div class="slideTxtBox">
					<div class="hd">
						<ul><li>教育</li><li>培训</li><li>出国</li></ul>
					</div>
					<div class="bd">
						<ul>
							<li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
							...
						</ul>
						<ul>
							<li><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
							...
						</ul>
						<ul>
							<li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
							...
						</ul>
					</div>
				</div>
			</pre>
	 </dd>

	 <dt>
		<h2>3、编写CSS，为HTML赋予样色</h2>
		<p><b>认真检查您的css，保证兼容大部分浏览器前提下再调用SuperSlide</b></p>
	 </dt>
	 <dd>
		<pre class="brush: css;">
		.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
		.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative; }
		.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
		.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
		.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
		.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
		.slideTxtBox .bd li{ height:24px; line-height:24px;   }
		.slideTxtBox .bd li .date{ float:right; color:#999;  }</pre>
	 </dd>

	 <dt>
		<h2>4、调用SuperSlide</h2>
		<p>
			<b>在本例中，请在 “.slideTxtBox” div结束后立刻调用 SuperSlide，这样会得到最好的效果，避免整个页面加载后再调用 SuperSlide；</b><br />
			因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。
		</p>
	 </dt>
	 <dd>
		<pre class="brush: html;">&lt;script type="text/javascript"&gt;jQuery(".slideTxtBox").slide(); &lt;/script&gt;</pre>
	 </dd>


	 <dt>
		<h2>5、效果如下：</h2>
	 </dt>

	<dd>


	<!-- 1 switchTab S -->
	<div id="switchTab" class="demoBox">
		<div class="bd" style="padding:10px 0">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/1.0-switchTab-iframe.html?" frameborder="0"></iframe>
					<p class="botTit"><em>1.0-标签切换</em></p>
				</div>

				<div class="params" style="width:505px;">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="fade">fade</option>
										<option value="fold">fold</option>
										<option value="left">left</option>
										<option value="top">top</option>
										<option value="leftLoop">leftLoop</option>
										<option value="topLoop">topLoop</option>
									</select>
								</td>
								<td class="n">自动运行<i>[autoPlay]</i>:</td>
								<td>
									<select name="autoPlay">
										<option value="false">false</option>
										<option value="true">true</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">触发方式<i>[trigger]</i>:</td>
								<td>
									<select rel="string" name="trigger">
										<option value="mouseover">mouseover</option>
										<option value="click">click</option>
									</select>
								</td>
								<td class="n">缓动效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<option value="linear">linear</option>
										<option value="swing">swing</option>
										<option value="easeOutCirc">easeOutCirc</option>
										<option value="easeInQuint">easeInQuint</option>
										<option value="easeInBack">easeInBack</option>
										<option value="easeOutBounce">easeOutBounce</option>
										<option value="easeOutElastic">easeOutElastic</option>
										<option value="easing-more">更多</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="700">700</option>
										<option value="1000">1000</option>
										<option value="0">0</option>
									</select>
								</td>
								<td class="n"></td>
								<td>
								</td>
							</tr>
					</table>
					<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".slideTxtBox").slide({<i></i>});</span></p>
					<p class="notice">注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。<br/></p>
				</div>

		</div><!-- bd E -->
	</div>
	<!-- 1 switchTab E -->

	</dd>

	<dt>
		<h2>
		6、如果您想了解更多，可以查看“<a target="_blank" href='demo.html'>基础效果</a>”和“<a target="_blank" href='otherDemo.html'>扩展效果</a>” <br />
		如果您想下载代码研究，可以到“<a target="_blank" href='downLoad.html'>下载页面</a>”
		</h2>
	</dt>


</dl>

	<script type="text/javascript">
		//当前调用代码初始化
		$(".params").each(function(ind){
			$(this).find(".curJsCode").eq(ind).html(getJsCode(ind));
		});

		//切换参数调用切换不同效果
		$(".params select").change(function(){

			 if($(this).val()=="easing-more"){ window.open("otherDemo/5.1/easing.html"); return; }

			 var srcStr="";
			 var ind=$(".demoBox").index( $(this).closest(".demoBox") );

			 var iframe = $(this).closest(".demoBox").find("iframe");
			 var selects = $(this).closest(".params").find("select");

			 selects.each(function(){
				srcStr += "&"+$(this).val();
			 });
			 iframe.attr("src",iframe.attr("src").split('&')[0]+srcStr);

			$(".curJsCode").eq(ind).html(getJsCode(ind));
		});

		//当前调用代码
		function getJsCode( ind ){
			var curJsCode="";
			var $cur = $(".curJsCode").eq(ind);

			$(".params").eq(ind).find("select").each(function(){
				if( $("option",this).index( $("option:selected",this) ) !=0 || $("option",this).attr("class")=="show")
				{
					var tempVal = $(this).attr("rel")=="string"?('"'+$(this).val()+'"'):$(this).val();
					curJsCode+= "," + $(this).attr("name")+":"+tempVal;
				}
			});
			if(ind==0) curJsCode = curJsCode.substring(1);
			$cur.find("i").html(curJsCode);
			curJsCode = $cur.html();

			return curJsCode;
		}

	</script>


</div>
<!-- content E -->


<div id="footer">Copyright ©2011-2013 大话主席 </div>



</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>
